﻿@{
    ViewData["Title"] = "EntityMarketAdd";
}

<br />
<br />
<div style="padding-left:20px">
    <button id="addRowBtn" class="layui-btn layui-bg-red"><i class="layui-icon layui-icon-addition"></i>新增行</button>
    <button id="addRowBtn" class="layui-btn layui-bg-red"><i class="layui-icon layui-icon-print"></i>保存</button>
    <button id="addRowBtn" class="layui-btn layui-bg-red"><i class="layui-icon layui-icon-return"></i>撤销</button>
    <button id="addRowBtn" class="layui-btn layui-bg-red"><i class="layui-icon layui-icon-delete"></i>删除</button>
</div>

<br />
<br />
@* 查询条件 *@
<table>
    <tbody>
        <tr>
            <td style="padding-bottom:20px">
                <div class="layui-inline">
                    <label class="layui-form-label">销售日期:</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
                    </div>
            </td>
            <td style="padding-bottom:20px">
                <div class="layui-form layui-row">
                    <label class="layui-form-label">客户：</label>
                    <div class="layui-col-md3" style="width:200px">
                        <select>
                            <option value="">请选择</option>
                            <option value="AAA">A</option>
                            <option value="BBB">B</option>
                        </select>

                    </div>
                </div>
            </td>
            <td style="padding-bottom:20px">
                <div class="layui-form layui-row">
                    <label class="layui-form-label">销售员：</label>
                    <div class="layui-col-md3" style="width:200px">
                        <select>
                            <option value="">请选择</option>
                            <option value="AAA">A</option>
                            <option value="BBB">B</option>
                        </select>

                    </div>
                </div>
            </td>
            <td style="padding-bottom:20px">
                <div class="layui-form layui-row">
                    <label class="layui-form-label">部门：</label>
                    <div class="layui-col-md3" style="width:200px">
                        <select id="departmentId" name="departmentId">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding-bottom:20px">
                <div class="layui-form layui-row">
                    <label class="layui-form-label">仓库：</label>
                    <div class="layui-col-md3" style="width:200px">
                        <select>
                            <option value="">请选择</option>
                            <option value="AAA">A</option>
                            <option value="BBB">B</option>
                        </select>

                    </div>
                </div>
            </td>
            <td style="padding-bottom:20px">
                <div class="layui-form layui-row">
                    <label class="layui-form-label">收货地址：</label>
                    <div class="layui-col-md3" style="width:200px">
                        <input type="text" name="" id="" placeholder="请输入" class="layui-input">
                    </div>
                </div>
            </td>
            <td style="padding-bottom:20px">
                <div class="layui-form layui-row">
                    <label class="layui-form-label">单据号：</label>
                    <div class="layui-col-md3" style="width:200px">
                        <input type="text" name="" id="" placeholder="请输入" class="layui-input">
                    </div>
                </div>
            </td>
            <td style="padding-bottom:20px">
                <div class="layui-form layui-row">
                    <label class="layui-form-label">流水号：</label>
                    <div class="layui-col-md3" style="width:200px">
                        <input type="text" name="" id="" placeholder="请输入" class="layui-input">
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<table id="dataTable" class="layui-table" style="width:2800px;padding-left:20px">
    <thead>
        <tr>
            <th style="width:50px">序号</th>
            <th style="width:100px">耳号</th>
            <th style="width:150px">成交价（元）</th>
            <th style="width:150px">定价（元）</th>
            <th style="width:150px">折扣比例</th>
            <th style="width:100px">等级</th>
            <th style="width:100px">品种</th>
            <th style="width:150px">性别</th>
            <th style="width:150px">养殖类型</th>
            <th style="width:150px">繁殖状态</th>
            <th style="width:100px">栋舍</th>
            <th style="width:100px">栏位</th>
            <th style="width:150px">出生日期</th>
            <th style="width:150px">出生重（kg）</th>
            <th style="width:150px">断奶重（kg）</th>
            <th style="width:100px">父号</th>
            <th style="width:100px">母号</th>
            <th style="width:100px">月龄</th>
            <th style="width:200px">操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    layui.use(['table', 'form', 'jquery', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var $ = layui.$;

        // 渲染
        laydate.render({
            elem: '#ID-laydate-demo',
            dele: 'date'
        });
        $('#addRowBtn').on('click', function () {


            // 获取数据表格和行数
            const table = document.getElementById('dataTable');
            const numRows = table.rows.length;

            // 如果行数超过5，则禁止添加新行
            if (numRows > 5) {
                layer.msg('已达到最大行数限制，不能再添加新行！');
                return;
            }
            var rowCount = $('#dataTable tbody tr').length + 1; // 获取当前行数并加1作为新行的序号
            var newRowHtml = '<tr>' +
                '<td>' + rowCount + '</td>' + // 新增自增序号列


                `<td>
                          <div class="select-wrapper">
                               <select  name="earbugles" id="earNnumber" lay-filter="" lay-verify="required">
                               <option value="">请选择耳号</option>
                          </select>
                          </div>
                    </td>` +
                '<td><input type="text" name="totalPrice"     id="totalPrice"       lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input"></td>' +
                '<td><input type="text" name="price"          id="price"            lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input"></td>' +
                '<td><input type="text" name="discount_ratio" id="discount_ratio"   lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input"></td>' +
                `<td>
                       <div class="select-wrapper">
                                <select name="class" id="class" lay-filter="" lay-verify="required">
                               <option value="">请选择等级</option>
                           </select>
                    </div>
                    </td>` +
                `<td>
                       <div class="select-wrapper">
                             <select name="variety" id="variety" lay-filter="" lay-verify="required">
                            <option value="">请选择品种</option>
                         </select>
                        </div>
                    </td>` +
                `<td>
                        <div class="select-wrapper">
                           <select name="Sex" id="Sex" lay-verify="required">
                                    <option  value=0>母</option>
                                    <option  value=1>公</option>
                            </select>
                        </div>
                    </td>` +
                `<td>
                        <div class="select-wrapper">
                            <select  name="sheep_type" id="sheep_type" lay-filter="" lay-verify="">
                              <option value=0>种母</option>
                              <option value=1>种公</option>
                             </select>
                        </div>
                    </td>` +
                `<td>
                       <div class="select-wrapper">
                               <select  name="reproduction_type" id="reproduction_type" lay-filter="" lay-verify="required">
                              <option value="">请选择繁殖状态</option>
                           </select>
                         </div>
                    </td>` +
                `<td>
                        <div class="select-wrapper">
                             <select  name="CottageName" id="buildings" lay-filter="" lay-verify="required">
                                    <option value="">请选择栋舍</option>
                            </select>
                            </div>
                    </td>` +
                `<td>
                         <div class="select-wrapper">
                                <select name="fieldName" id="columns" lay-filter="" lay-verify="required">
                                    <option value="">请选择栏位</option>
                                </select>
                         </div>
                    </td>` +
                '<td><input type="date" id="EDate" name="EDate" id="dateOfBreeding"></td>' +
                '<td><input type="text" name="birth_weight"   id="birth_weight"   lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input"></td>' +
                '<td><input type="text" name="weaning_weight" id="weaning_weight" lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input"></td>' +
                '<td><input type="text" name="father_sign"    id="father_sign"    lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input"></td>' +
                '<td><input type="text" name="parameter"      id="parameter"      lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input"></td>' +
                '<td><input type="text" name="age_moon"       id="age_moon"       lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></td>' +
                '<td style="display:none"><input type="hidden" name="purId" value="2"></td>' +
                '<td><button class="layui-btn layui-btn-xs layui-btn-danger" onclick="saveRow(this)">保存</button><button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRow(this)">删除</button></td>' +
                '</tr>';
            $('#dataTable tbody').append(newRowHtml);

            // 渲染新添加的select样式
            layui.use('form', function () {
                var form = layui.form;
                form.render('select'); // 应用所有的 select 样式
            });
            //绑定耳号
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/ArchivesAllInfo',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        var enumData = res; // 直接使用返回的数据
                        var select = $('#earNnumber');
                        $.each(enumData, function (index, item) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.earNnumber).text(item.earNnumber);
                            select.append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });

            //绑定部门下拉框
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/DeparList',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        var departDate = res;
                        var select = $('#departmentId');
                        $.each(departDate, function (index, item) {
                            var option = $('<option>').val(item.id).text(item.name);
                            select.append(option);
                        })
                        //手动触发 layui组件的渲染
                        layui.form.render('select');
                    },
                })
            })

            //绑定品种
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetSheepBreeds',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        var enumData = res; // 直接使用返回的数据
                        var select = $('#variety');
                        $.each(enumData, function (index, item) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.value).text(item.value);
                            select.append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });

            //绑定等级
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetGeneticGrade',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        var enumData = res; // 直接使用返回的数据
                        var select = $('#class');
                        $.each(enumData, function (index, item) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.value).text(item.value);
                            select.append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });

            //绑定状态
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetReproductiveState',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        var enumData = res; // 直接使用返回的数据
                        var select = $('#reproduction_type');
                        $.each(enumData, function (index, item ) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.value).text(item.value);
                            select.append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });

            //绑定栋舍
            var data = [];
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/CootList',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        data = res; // 直接使用返回的数据
                        var select = $('#buildings');
                        $.each(data, function (index, item) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.name).text(item.name);
                            select.append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });

            //人员列表
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/PrincipalType', // 后端枚举数据接口地址
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        var enumData = res; // 直接使用返回的数据
                        var select = $('#rommss');
                        $.each(enumData, function (index, item) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.value).text(item.text);
                            select.append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });

            // 栋舍栏位二级联动
            $('#buildings').change(function () {
                var name = $("#buildings").val();
                var id = 0;
                $.each(data, function (index, item) {
                    if (name == item.name) {
                        id = item.id;
                    }
                });
                //监听到了下拉框选择的选项，传递过来
                $.get({
                    url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/FieidList', // 后端枚举数据接口地址
                    data: {
                        id: id
                    },
                    dataType: "json",
                    success: function (res) {
                        $("#columns").empty();
                        var option = '<option value=" ">' + "请选择栏位" + '</option>';
                        $("#columns").append(option);
                        $.each(res, function (index, item) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.name).text(item.name);
                            $('#columns ').append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });
            form.render(); // 重新渲染表单，使新增的输入框生效
        });

        $('#saveDataBtn').on('click', function () {
            // 执行保存所有数据的操作，您可以根据需要补充逻辑
            console.log('保存数据');
        });
    });

    var $ = layui.$;
    function saveRow(btn) {

        var formData = {
            earbugles: $('#earNnumber').val(),
            totalPrice: $('#totalPrice').val(),
            price: $('#price').val(),
            discount_ratio: $('#discount_ratio').val(),
            Sex: $('#Sex').val(),
            cottageName: $('#buildings').val(),
            fieldName: $('#columns').val(),
            class: $('#class').val(),
            variety: $('#variety').val(),
            reproduction_type: $('#reproduction_type').val(),
            sheep_type: $('#sheep_type').val(),
            EDate: $('#EDate').val(),
            birth_weight: $('#birth_weight').val(),
            weaning_weight: $('#weaning_weight').val(),
            father_sign: $('#father_sign').val(),
            parameter: $('#parameter').val(),
            age_moon: $('#age_moon').val(),
        };
        console.log(formData)

        $.ajax({
            type: 'post',
            url: 'http://10.31.60.18:8000/AuthorizationSetRout/api/EntityMarket/EntityMarketAdd',
            data: JSON.stringify(formData), // 将表单数据转为JSON格式
            contentType: 'application/json',
            success: function (res) {
                if (res > 0) {

                    var icon = 0;
                    layer.alert('新增成功', {
                        icon: 1,
                        shadeClose: true,
                        title: "新增",
                    }, function () {
                        location.href = "/EntityPurchase/EntityMarketShow";
                    });
                } else {
                    layer.msg('添加失败：');
                }

            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }
    // 删除行的函数
    function deleteRow(btn) {
        $(btn).closest('tr').remove();
    }

</script>

<style>

    /* 为日期输入框添加样式 */
    input[type="date"] {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
        font-size: 14px;
        color: #333;
        width: 150px;
        /* 设置一个合适的宽度 */
    }

    /* 模拟layui的下拉框样式 */
    .select-wrapper {
        position: relative;
        display: inline-block;
        font-family: Arial, sans-serif;
        overflow: hidden;
        border: 1px solid #e6e6e6; /* 边框样式 */
        border-radius: 4px; /* 圆角 */
        background-color: #fff; /* 背景颜色 */
    }

        .select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: none;
            padding: 8px 10px;
            font-size: 14px;
            cursor: pointer;
            width: 150px;
            background: transparent; /* 透明背景 */
        }

        .select-wrapper::after {
            content: '\25BE'; /* 下三角形符号 */
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
        }

        /* 根据选中状态改变样式 */
        .select-wrapper select:focus + ::after {
            color: #009688; /* 选中时的颜色 */
        }
</style>
